<template>
    <div>
        <div id="app">
            <div class="center">
                <div class="head">
                    <h3>
                        热门品牌
                        <small>国际经典 品质保证</small>
                    </h3>
                    <a href="javascript:;">
                        <button @click="mgebtn" :class="{'Color':mgeColor}">左</button>
                        <button @click="pwdbtn" :class="{'Color':pwdColor}">右</button>
                    </a>
                </div>
                <div class="box" >
                    <ul ref="wa">
                        <li v-for="A in HomeBrand">
                            <img :src="A.picture" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VueProject01Homebrand',
    props:['HomeBrand'],
    data() {
        return {
            mgeColor: true,
            pwdColor: false
        };
    },

    mounted() {
        
    },

    methods: {
        pwdbtn () {
        this.mgeColor = false
        this.pwdColor = true
        this.$refs.wa.style.transform='translateX(-1240px);'
        },
        mgebtn () {
        this.mgeColor = true
        this.pwdColor = false
        this.$refs.wa.style.transform='translateX(0);'
        }
    },
};
</script>

<style scoped lang="scss">
button{
    // padding: 20px;
    width: 20px;
    height: 20px;
    outline: none;
    border: none;
    color: #555;
}
    .Color{
        background-color: #ffd700;
        color: #fff;
        // transform: translateX(-1240px);
    }
#app{
    width: 100%;
    height: 460px;
}
.center{
            margin: 0 auto;
            width: 1240px;
            height: 100%;
}
.head{
    width: 100%;
    height: 115px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3{
        // flex: 1;
        font-size: 32px;
        font-weight: 400;
        margin-left: 6px;
        height: 35px;
        line-height: 35px;
        small{
            font-size: 16px;
            color: #999;
            margin-left: 20px;
        }
    }
    a{
        font-size: 16px;
        vertical-align: middle;
        margin-right: 4px;
        color: #999;
        text-decoration: none;
        span{
            width: 20px;
            height: 20px;
        }
    }
}
.box{
    width: 1240px;
    height: 345px;
    overflow: hidden;
    ul{
        width: 2480px;
        height: 305px;
        display: flex;
        justify-content: space-between;
        li{
            list-style: none;
            width: 240px;
            height: 305px;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>